<div class="modal-header">
  <div class="modal-title">{{ '分配 ' + record.username + ' 店铺权限' }}</div>
</div>
<nz-spin *ngIf="!i" class="modal-spin"></nz-spin>

<div *ngIf="i">
  <nz-collapse nzAccordion>
    <nz-collapse-panel
      *ngFor="let panel of panels"
      [nzHeader]="panel.company_name"
      [nzActive]="panel.active"
      [nzExtra]="extraTpl"
      (nzActiveChange)="activeChange(panel.ID, $event)"
    >
      <nz-checkbox-wrapper style="width: 100%" (nzOnChange)="log($event)">
        <div nz-row>
          <ng-container *ngFor="let op of checkOptions">
            <div nz-col nzSpan="8">
              <label nz-checkbox [nzValue]="op['shop_id']" [ngModel]="op['checked']" (nzCheckedChange)="checkChange($event, op)"
                ><span style="{{ op['status'] == 1 ? '' : 'color:#cccccc' }}">{{ op['fordeal_shop_name'] }}</span></label
              >
            </div>
          </ng-container>
        </div>
      </nz-checkbox-wrapper>
    </nz-collapse-panel>
  </nz-collapse>
  <ng-template #extraTpl>
    <!-- You can use stopPropagation if you don't want the panel to toggle -->
    <i nz-icon [nzType]="'appstore'" title="全选/反选" (click)="checkAll($event)"></i>
  </ng-template>
</div>

<script>
  console.dir(this.el.nativeElement.querySelector('.test-get-dom'));
</script>

<div class="modal-footer">
  <button nz-button type="button" (click)="close()">关闭</button>
  <button nz-button type="submit" nzType="primary" (click)="save()" [nzLoading]="http.loading">保存 </button>
</div>
